<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>积分中心</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        .points-card {
            background: linear-gradient(135deg, #0052d9, #1890ff);
            border-radius: 12px;
            color: white;
            box-shadow: 0 4px 12px rgba(0, 82, 217, 0.2);
        }
        .progress-bar {
            height: 6px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background-color: white;
            border-radius: 3px;
        }
        .tab-item {
            position: relative;
            padding: 12px 0;
            font-size: 14px;
            flex: 1;
            text-align: center;
            color: #666;
        }
        .tab-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 2px;
        }
        .task-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .primary-btn {
            background-color: #0052d9;
            color: white;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
        }
        .secondary-btn {
            background-color: #f0f0f0;
            color: #666;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
        }
        .done-btn {
            background-color: #f0f0f0;
            color: #999;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
        }
        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body class="pb-16">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../core/profile.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">积分中心</h1>
        <a href="#" class="text-sm text-gray-500">规则</a>
    </header>

    <!-- 积分卡片 -->
    <div class="p-4">
        <div class="points-card p-4">
            <div class="flex justify-between items-center">
                <div>
                    <div class="text-sm opacity-80 mb-1">我的积分</div>
                    <div class="text-3xl font-bold">1,280</div>
                </div>
                <button class="bg-white bg-opacity-20 text-white text-xs px-3 py-1 rounded-full">
                    积分明细
                </button>
            </div>
            <div class="mt-4">
                <div class="flex justify-between items-center text-xs mb-2">
                    <span>会员等级：贵宾会员</span>
                    <span>1280/2000</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 64%"></div>
                </div>
                <div class="flex justify-between items-center text-xs mt-2">
                    <span>本月已获得：320积分</span>
                    <span>距升级还需：720积分</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 选项卡 -->
    <div class="bg-white flex border-b border-gray-200">
        <div class="tab-item active">赚积分</div>
        <div class="tab-item">兑好礼</div>
        <div class="tab-item">积分记录</div>
    </div>

    <!-- 任务列表 -->
    <div class="p-4">
        <h2 class="text-base font-medium mb-3">每日任务</h2>
        
        <!-- 任务卡片：签到 -->
        <div class="task-card p-3 mb-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                        <i class="icon iconfont icon-calendar text-blue-500 text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm font-medium">每日签到</div>
                        <div class="text-xs text-gray-500 mt-1">每日签到可获得10积分</div>
                    </div>
                </div>
                <button class="primary-btn">签到</button>
            </div>
        </div>
        
        <!-- 任务卡片：浏览商品 -->
        <div class="task-card p-3 mb-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                        <i class="icon iconfont icon-eye text-green-500 text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm font-medium">浏览商品</div>
                        <div class="text-xs text-gray-500 mt-1">浏览10件商品可获得20积分</div>
                    </div>
                </div>
                <div class="text-xs text-gray-500">
                    <span class="text-blue-500">3</span>/10
                </div>
            </div>
        </div>
        
        <!-- 任务卡片：分享商品 -->
        <div class="task-card p-3 mb-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
                        <i class="icon iconfont icon-share text-yellow-500 text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm font-medium">分享商品</div>
                        <div class="text-xs text-gray-500 mt-1">分享商品给好友可获得15积分</div>
                    </div>
                </div>
                <button class="secondary-btn">去分享</button>
            </div>
        </div>
        
        <!-- 任务卡片：评价订单 -->
        <div class="task-card p-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                        <i class="icon iconfont icon-comment text-red-500 text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm font-medium">评价订单</div>
                        <div class="text-xs text-gray-500 mt-1">评价订单可获得30积分</div>
                    </div>
                </div>
                <button class="done-btn">已完成</button>
            </div>
        </div>
        
        <h2 class="text-base font-medium mb-3 mt-6">成长任务</h2>
        
        <!-- 任务卡片：完善个人资料 -->
        <div class="task-card p-3 mb-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                        <i class="icon iconfont icon-user text-purple-500 text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm font-medium">完善个人资料</div>
                        <div class="text-xs text-gray-500 mt-1">完善个人资料可获得50积分</div>
                    </div>
                </div>
                <button class="secondary-btn">去完善</button>
            </div>
        </div>
        
        <!-- 任务卡片：绑定手机号 -->
        <div class="task-card p-3 mb-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                        <i class="icon iconfont icon-phone text-indigo-500 text-xl"></i>
                    </div>
                    <div>
                        <div class="text-sm font-medium">绑定手机号</div>
                        <div class="text-xs text-gray-500 mt-1">绑定手机号可获得100积分</div>
                    </div>
                </div>
                <button class="done-btn">已完成</button>
            </div>
        </div>
    </div>
    
    <!-- 热门兑换 -->
    <div class="p-4 mt-2">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-base font-medium">热门兑换</h2>
            <a href="#" class="text-sm text-gray-500">更多 ></a>
        </div>
        
        <div class="grid grid-cols-2 gap-3">
            <!-- 商品1 -->
            <div class="product-card">
                <div class="w-full h-32 bg-gray-100">
                    <img src="https://via.placeholder.com/160x160?text=优惠券" class="w-full h-full object-cover" alt="兑换商品">
                </div>
                <div class="p-2">
                    <div class="text-sm font-medium line-clamp-2">满200减30元优惠券</div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 text-sm font-medium">300积分</div>
                        <button class="text-xs bg-blue-500 text-white px-2 py-1 rounded">兑换</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品2 -->
            <div class="product-card">
                <div class="w-full h-32 bg-gray-100">
                    <img src="https://via.placeholder.com/160x160?text=门票" class="w-full h-full object-cover" alt="兑换商品">
                </div>
                <div class="p-2">
                    <div class="text-sm font-medium line-clamp-2">黄果树瀑布景区门票9折券</div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 text-sm font-medium">500积分</div>
                        <button class="text-xs bg-blue-500 text-white px-2 py-1 rounded">兑换</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品3 -->
            <div class="product-card">
                <div class="w-full h-32 bg-gray-100">
                    <img src="https://via.placeholder.com/160x160?text=茶叶" class="w-full h-full object-cover" alt="兑换商品">
                </div>
                <div class="p-2">
                    <div class="text-sm font-medium line-clamp-2">贵州高山云雾茶试喝装</div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 text-sm font-medium">800积分</div>
                        <button class="text-xs bg-blue-500 text-white px-2 py-1 rounded">兑换</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品4 -->
            <div class="product-card">
                <div class="w-full h-32 bg-gray-100">
                    <img src="https://via.placeholder.com/160x160?text=酒店" class="w-full h-full object-cover" alt="兑换商品">
                </div>
                <div class="p-2">
                    <div class="text-sm font-medium line-clamp-2">酒店住宿券 部分五星酒店可用</div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 text-sm font-medium">2000积分</div>
                        <button class="text-xs bg-blue-500 text-white px-2 py-1 rounded">兑换</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-2">
            <a href="../core/home.html" class="nav-item">
                <i class="icon iconfont icon-home"></i>
                <span>首页</span>
            </a>
            <a href="../core/discover.html" class="nav-item">
                <i class="icon iconfont icon-discover"></i>
                <span>发现</span>
            </a>
            <a href="../core/messages.html" class="nav-item">
                <i class="icon iconfont icon-message"></i>
                <span>消息</span>
            </a>
            <a href="../core/profile.html" class="nav-item active">
                <i class="icon iconfont icon-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html> 